<template>
  <div class="main">
    <div class="main_title">
      <div class="topMoney">
        <div class="left">
          我的爆品金：<span>{{ this.userInfo.InVogueCoin }}</span>
        </div>
        <!-- <div class="center" @click="toShow()">
          <span>如何获取</span><van-icon name="question-o" />
        </div> -->
        <div class="right" @click='toRecord()'>
          <p>兑换记录</p>
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="boomImg">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item>
            <img src="https://image.hezongyy.com/pcimage/119h5/bpjImg.png" alt="">
          </van-swipe-item>
          <!-- <van-swipe-item>
            <img src="https://image.hezongyy.com/pcimage/119h5/appboom.jpg" alt="">
          </van-swipe-item> -->
        </van-swipe>
      </div>
      <div class="select">
        <div class="leftClass">
          <p class="font26 allClass" @click="showSort()">
            分类：{{ secondCate }}
            <!-- <img src='../../assets/img/arrowDown.png' alt=""> -->
          </p>
          <div class="tree" v-show="showCategory">
            <van-tree-select :items="items" :active-id.sync="activeId" :main-active-index.sync="activeIndex" @click-item="onitemclick" />
          </div>
        </div>
        <div class="rightMoney">
          <p class="font26" @click="showPopup">价格区间</p>
          <van-popup v-model="show">
            <div class="moneyList">
              <div class="listOne" @click="checkMoney(0, 3000, 0)" :class="{ active: curIndex == 0 }">
                <span>0</span>
                <span>-</span>
                <span>3000</span>
              </div>
              <div class="listOne" @click="checkMoney(3000, 5000, 1)" :class="{ active: curIndex == 1 }">
                <span>3000</span>
                <span>-</span>
                <span>5000</span>
              </div>
              <div class="lastOne" :class="{ selfActive: curIndex == 2 }">
                <input type="text" v-model="startNum" />
                <span>-</span>
                <input type="text" v-model="endNum" />
              </div>
              <div class="btn" @click="checkMoney(startNum, endNum, 2)">
                确认
              </div>
            </div>
          </van-popup>
        </div>
      </div>
      <form class="search" action="javascript:return true" @submit.prevent="formSubmit">
        <input type="text" v-model="search" @keyup.enter="getList(1)" placeholder="请输入关键词进行搜索" />
        <button type="primary" @click="Search(1)">搜索</button>
      </form>
    </div>
    <div class="main_center">
      <div class="good">
        <!-- 搜索商品 -->
        <div class="goods">
          <!-- // 专区数据 -->
          <van-list v-model="isLoading" :finished="finished" finished-text="没有更多了" @load="getList">
            <div class="life">
              <div class="life_item" v-for="(v, i) in birdGoods" :key="i" @click="toDetails1(v)">
                <img class="imgs" :src="v.img" alt />
                <div class="item_main">
                  <div class="left">
                    <div class="name">{{ v.goodsName }}</div>
                    <div class="img">
                      <img src="../../assets/image/moliy.png" alt />
                      <span>{{ v.price }}</span>
                    </div>
                  </div>
                  <div class="car">兑换</div>
                </div>
              </div>
            </div>
          </van-list>
          <!-- <exChange
            v-show="show"
            :click_add="click_add"
            @changeDia="changeDia"
          ></exChange> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import exChange from '../../components/exChange'
import url from '../../axios/apiUrl'
import { postRequest } from '../../api/index'
import { getRequest } from '../../api/indexGet'
export default {
  data() {
    return {
      loading: false,
      activeName: 'a',
      allGoods: [], //所有商品
      totalPage: 1,
      num: 1,
      curTitle: 3,
      birdGoods: [], //神鸟商品
      showcom: true,
      show: false,
      click_cur: {},
      click_add: {},
      search: '',
      goodsSearch: [], // 商品搜索
      searchData: [],
      pageSize: '20', //每页请求条数
      pageNum: 1,
      isLoading: false,
      finished: false,

      userInfo: {},
      goodsList: [], //商品列表
      sortList: [], //获取的分类
      api: {
        pageNum: 1,
        keyword: null,
        categoryId: null,
        minPrice: 0,
        maxPrice: 9999999,
      },
      items: [],
      activeId: '209',
      activeIndex: 0,
      showCategory: false,
      secondCate: '全部分类',
      show: false,
      curIndex: -1, //价格选中索引
      startNum: 0, //手输的开始区间
      endNum: 5000, //手输的结束区间
    }
  },
  components: {
    exChange,
  },
  created() {
    getRequest(url.boomGoldMoney).then((res) => {
      if (res.data.code == '000000') {
        this.userInfo = res.data.content
      }
    })
    getRequest(url.boomSort).then((res) => {
      if (res.data.code == '000000') {
        this.sortList = res.data.content
        // 通过正则替换对象的属性名
        this.sortList = JSON.parse(
          JSON.stringify(this.sortList).replace(/categoryName/g, 'text')
        )
        this.sortList = JSON.parse(
          JSON.stringify(this.sortList).replace(/categoryId/g, 'id')
        )
        this.sortList = JSON.parse(
          JSON.stringify(this.sortList).replace(/subList/g, 'children')
        )
        this.items = this.sortList
      }
    })
  },
  methods: {
    getList(page) {
      if (page) this.api.pageNum = this.page
      postRequest(url.boomGoodsList, this.api)
        .then((res) => {
          if (res.data.code == '000000') {
            if (this.api.pageNum == 1) {
              this.birdGoods = []
            }
            this.isLoading = false
            this.api.pageNum++
            this.goodsSearch = res.data.content
            if (res.data.content.list.length != 0) {
              this.birdGoods = this.birdGoods.concat(res.data.content.list)
            } else {
              this.birdGoods = []
            }
            this.birdGoods.forEach((obj) => {
              this.$set(obj, 'num', 1)
            })
            if (this.birdGoods.length >= res.data.content.page.total) {
              // 数据全部加载完成
              this.finished = true
            } else {
              this.finished = false
            }
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    // 搜索商品
    Search() {
      this.birdGoods = []
      this.api.pageNum = 1
      this.api.keyword = this.search
      this.getList(1)
    },
    formSubmit() {
      return false
    },
    searchTo() {
      // 手机键盘回车的编码是13
      if (event.keyCode == 13) {
        this.birdGoods = []
        this.Search()
      }
    },
    // input事件
    onBlur() {
      setTimeout(() => {
        document.body.scrollTop = document.body.scrollHeight
      }, 3000)
    },
    changeDia(bool) {
      this.show = bool
    },
    // 综合专区去详情
    toDetails1(v) {
      this.$router.push({
        path: '/boomGoodsDetails',
        query: { id: v.goodsId },
      })
    },
    toShow() {
      window.location.href = 'https://www.hezongyy.com/h5main/expiosApp.html'
    },
    // 跳转到兑换记录
    toRecord() {
      window.location.href =this.pathURL+'nativeApp/ExplosiveGold'
    },
    // 跳转积分订单
    toOrder() {
      this.$router.push('/pointsOrder')
    },

    // 点击分类
    onitemclick(data) {
      this.birdGoods = []
      this.secondCate = data.text
      this.showCategory = false
      this.api.categoryId = data.id
      this.getList(1)
    },
    // 点击显示分类
    showSort() {
      this.showCategory = !this.showCategory
    },
    showPopup() {
      this.showCategory = false
      this.show = true
    },
    checkMoney(start, end, index) {
      this.birdGoods = []
      this.curIndex = index
      this.api.pageNum = 1
      this.api.minPrice = start
      this.api.maxPrice = end
      if (index == 2) {
        var reg = /^\d+$/
        if (reg.test(start)) {
          this.api.minPrice = start
        } else {
          if (isNaN(start)) {
            this.api.minPrice = 0
            this.startNum = 0
          } else {
            this.api.minPrice = parseInt(start)
            this.startNum = parseInt(start)
          }
        }
        if (reg.test(end)) {
          this.api.maxPrice = end
        } else {
          if (isNaN(end)) {
            this.api.maxPrice = 5000
            this.endNum = 5000
          } else {
            this.api.maxPrice = parseInt(end)
            this.endNum = parseInt(end)
          }
        }
      } else {
        this.startNum = 0
        this.endNum = 5000
      }
      this.getList(1)
      this.show = false
    },
  },
}
</script>
<style lang="less" scoped>
.main {
  padding: 0;
  margin: 0;
  display: block;
  position: relative;
  overflow: scroll;
  .goods {
    width: 100vw;
    height: 100vh;
    opacity: 1;
    background: #ffffff;
    overflow: scroll;
    .van_list {
      height: 100%;
    }
  }
  .main_title {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 9;
    .topMoney {
      margin: 0 auto;
      width: 688px;
      height: 88px;
      background: #ffffff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        color: #333;
        font-size: 26px;
        span {
          color: #1db807;
          font-weight: bold;
          font-size: 28px;
        }
      }
      .center {
        color: #ea3000;
        align-items: center;
        span {
          margin-right: 0.06rem;
        }
      }
      .right {
        font-size: 26px;
        display: flex;
        align-items: center;
      }
    }
    .boomImg {
      img {
        width: 100%;
      }
    }
    .select {
      margin: 0 auto;
      width: 750px;
      height: 88px;
      background: #ffffff;
      display: flex;
      align-items: center;
      justify-content: space-around;
      position: relative;
      .leftClass {
        .font26 {
          font-size: 26px;
          color: #333;
        }
        .tree {
          font-size: 26px;
          position: absolute;
          z-index: 10;
          left: 0px;
          margin-top: 20px;
          .van-tree-select {
            width: 100%;
          }
          .van-sidebar {
            text-align: center;
            width: 250px;
            background-color: #fff;
            flex: none;
            .van-sidebar-item {
              height: 88px;
              line-height: 88px;
              background-color: #fff;
              border-bottom: 1px solid #dedede;
              font-size: 26px;
              .van-sidebar-item__text {
                font-size: 36px;
              }
            }
            .van-sidebar-item--select {
              color: #1eb808;
            }
            .van-sidebar-item--select::before {
              width: 6px;
              height: 88px;
              background: #3ebc2c;
            }
          }
          .van-tree-select__content {
            background: #f8f8f8;
            flex: none;
            width: 500px;
            .van-tree-select__item {
              margin: 20px;
              height: 68px;
              text-align: center;
              line-height: 68px;
              border: 1px solid #eaeaea;
              border-radius: 34px;
              padding: 0 20px;
              width: 200px;
            }
            .van-tree-select__item--active {
              color: #1eb808;
            }
          }
        }
      }
      .rightMoney {
        .van-popup {
          width: 750px;
          height: 300px;
          top: 44%;
        }
        .moneyList {
          margin-top: 30px;
          width: 100%;
          display: flex;
          justify-content: space-around;
          flex-wrap: wrap;
          .listOne {
            width: 280px;
            height: 72px;
            background: #f8f8f8;
            border: 1px solid #eaeaea;
            border-radius: 36px;
            text-align: center;
            line-height: 72px;
            font-size: 26px;
            color: #343434;
            margin-bottom: 30px;
          }
          .active {
            border: 1px solid #3ebc2c;
            color: #3ebc2c;
          }
          .lastOne {
            display: flex;
            width: 387px;
            height: 72px;
            background: #f8f8f8;
            border: 1px solid #eaeaea;
            border-radius: 36px;
            justify-content: space-around;
            align-items: center;
            input {
              border: none;
              width: 168px;
              height: 62px;
              background: #ffffff;
              border-radius: 31px;
              text-align: center;
              font-size: 26px;
            }
          }
          .selfActive {
            border: 1px solid #3ebc2c;
            color: #3ebc2c;
          }
          .btn {
            width: 200px;
            height: 72px;
            background: #ffffff;
            border: 1px solid #3ebc2c;
            border-radius: 36px;
            text-align: center;
            line-height: 72px;
            color: #3ebc2c;
            font-size: 26px;
          }
        }
      }
    }
    .search {
      text-align: center;
      position: relative;
      top: 0;
      left: 0;
      input {
        width: 96%;
        height: 88px;
        line-height: 88px;
        box-sizing: border-box;
        // background: #ffffff;
        border: 1px solid #f1f2f6;
        border-radius: 4px;
        padding-left: 10px;
        outline-style: none;
        font-size: 24px;
        font-weight: 500;
        font-family: 'Microsoft soft';
      }
      button {
        font-size: 26px;
        color: #3dbb2b;
        font-weight: bold;
        border: none;
        background-color: #ffffff;
        position: absolute;
        right: 40px;
        bottom: 24px;
        border-left: 0.01rem solid #3dbb2b;
      }
    }
  }
  .main_center {
    margin-top: 6.8rem;
    .title {
      background: #fff;
      height: 0.84rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      li {
        width: 25%;
        text-align: center;
        font-size: 0.32rem;
        font-weight: bold;
        line-height: 0.32rem;
        .bgLine {
          // background-color: #3dbb2b;
          width: 1.2rem;
          // height: 0.6rem;
          border-bottom: 0.06rem solid #3dbb2b;
          margin: 0 auto;
        }
        p:first-child {
          height: 0.44rem;
          // border-bottom: 0.01rem solid #3dbb2b;
        }
      }
    }
    .life {
      background: #f1f2f6;
      .life_item {
        height: 2.52rem;
        background: #ffffff;
        border-bottom: 0.2rem solid #f1f2f6;
        padding: 0.2rem;
        align-items: center;
        display: flex;
        position: relative;
        .imgs {
          display: inline-block;
          width: 160px;
          height: 160px;
          padding-right: 22px;
        }
        .item_main {
          width: 100%;
          height: 2.6rem;
          align-items: 0.48rem;
          box-sizing: border-box;
          padding-left: 0.2rem;
          .left {
            width: 100%;
            .name {
              height: 70px;
              width: 6rem;
              font-size: 26px;
              font-family: PingFang SC;
              font-weight: bold;
              color: #222222;
              margin-top: 16px;
              overflow: hidden;
              text-overflow: clip;
            }
            .img {
              position: absolute;
              bottom: 30px;
              left: 216px;
              img {
                width: 36px;
                height: 36px;
              }
              span {
                font-size: 36px;
                font-weight: bold;
                color: #1eb808;
              }
            }
          }
          .car {
            position: absolute;
            right: 20px;
            width: 139px;
            height: 48px;
            background: #1db807;
            border-radius: 24px;
            text-align: center;
            color: #fff;
            line-height: 48px;
            bottom: 20px;
          }
        }
      }
    }
  }
}
</style>